<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雪月蛋糕</title>
    <!-- 引入Layui样式文件 -->
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>

<body>

<div id="container" class="layui-container">
    <!-- 商品列表 -->
    <div id="goods" class="layui-row">

        <div class="layui-form-item">
            <div class="layui-input-group">
                <div class="layui-input-split layui-input-prefix">
                    蛋糕名称
                </div>
                <input id="newCakeNameInput" type="text" name="newTel" placeholder="请输入新的蛋糕名称" class="layui-input"
                       >
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-group">
                <div class="layui-input-split layui-input-prefix">
                    价格
                </div>
                <input id="newPriceInput" type="text" name="newTel" placeholder="请输入新的价格" class="layui-input"
                       >
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-group">
                <div class="layui-input-split layui-input-prefix">
                    描述
                </div>
                <input id="newDescriptionInput" type="text" name="newTel" placeholder="请输入新的描述" class="layui-input">
            </div>
        </div>
        <form class="layui-form" id="uploadForm" action="" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">上传图片</label>
                <div class="layui-input-block">
                    <input type="file" name="file" lay-verify="required" lay-title="请选择图片" id="fileInput"
                           accept="image/*">
                </div>
            </div>

<!--            <div class="layui-form-item">-->
<!--                <div class="layui-input-block">-->
<!--                    <button class="layui-btn" type="button" id="uploadButton">上传图片</button>-->
<!--                </div>-->
<!--            </div>-->
        </form>
        <div class="layui-form-item">
            <button id="newUpbutton" class="layui-btn" lay-submit lay-filter="demo2" data-id="${data.id}">上架</button>
        </div>
        <!-- 文件上传表单 -->

        <div id="uploadedImageContainer" class="layui-row"></div>

    </div>
</div>
<script>
    layui.use(['element', 'layer', 'util', 'form'], function () {
        // var element = layui.element;
        var form = layui.form;
        var layer = layui.layer;
        // var util = layui.util;
        var laytpl = layui.laytpl;
        var $ = layui.$;

        $("#goods").on("click", "#newUpbutton", function () {
            // 获取蛋糕信息
            var newCakeName = $("#newCakeNameInput").val();
            var newPrice = $("#newPriceInput").val();
            var newDescription = $("#newDescriptionInput").val();

            // 获取上传的图片数据
            var fileInput = $('#fileInput')[0];
            var files = fileInput.files;

            if (files.length > 0) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var base64Data = e.target.result;

                    // 发送Ajax请求
                    $.ajax({
                        url: '/main/insertgoods',
                        type: 'POST',
                        data: {
                            cakename: newCakeName,
                            price: newPrice,
                            des: newDescription,
                            img: base64Data
                        },
                        success: function () {
                            // 处理上架成功的情况
                            layer.msg('上架成功');
                            // 这里可以根据后端返回的数据进行一些处理
                        },
                        error: function () {
                            // 处理上架失败的情况
                            layer.msg('上架失败，请重试');
                        }
                    });
                };
                reader.readAsDataURL(files[0]);
            } else {
                layer.msg('请选择图片');
            }
        });

        // $('#goods').on('click', '#uploadButton', function () {
        //     var fileInput = $('#fileInput')[0];
        //     var files = fileInput.files;
        //     // console.log(id);
        //
        //     if (files.length > 0) {
        //         var reader = new FileReader();
        //         reader.onload = function (e) {
        //             var base64Data = e.target.result;
        //             uploadImage(base64Data);
        //         };
        //         reader.readAsDataURL(files[0]);
        //     } else {
        //         layer.msg('请选择图片');
        //     }
        // });
        //
        // $("#goods").on("click", "#newUpbutton", function () {
        //
        //     // 获取蛋糕信息
        //     var newCakeName = $("#newCakeNameInput").val();
        //     var newPrice = $("#newPriceInput").val();
        //     var newDescription = $("#newDescriptionInput").val();
        //     // 发送Ajax请求
        //     $.ajax({
        //         url: '/main/updatagoods',
        //         type: 'POST',
        //         data: {
        //             cakename: newCakeName,
        //             price: newPrice,
        //             des: newDescription
        //         },// 将数据转为JSON字符串
        //         success: function () {
        //             // 处理更新成功的情况
        //             layer.msg('上架成功');
        //             // 这里可以根据后端返回的数据进行一些处理
        //         },
        //         error: function () {
        //             // 处理更新失败的情况
        //             layer.msg('上架失败，请重试');
        //         }
        //     });
        // });
        //
        // // 上传图片到后端
        // function uploadImage(base64Data) {
        //     // 使用 Ajax 将 Base64 数据发送到后端
        //     $.ajax({
        //         type: 'POST',
        //         url: '/main/insertgoods', // 替换为后端接口地址
        //         data: {
        //             img: base64Data
        //         },
        //         success: function (response) {
        //             var uploadedImageContainer = $('#uploadedImageContainer');
        //             uploadedImageContainer.html('<div class="layui-col-md4"><img src="' + base64Data + '" alt="Uploaded Image" class="layui-upload-img"></div>');
        //             layer.msg('上传成功');
        //         },
        //         error: function () {
        //             layer.msg('上传失败，请重试');
        //         }
        //     });
        // }

    });

</script>
</body>
</html>
